<template>
  <div class="search">
    <el-autocomplete
      v-model="state"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入菜品名称"
      @select="handleSelect"
    >
      <i class="el-icon-edit el-input__icon" slot="suffix"></i>
    </el-autocomplete>
    <el-button :style="{ left: 10 + 'px' }" type="primary" plain class="btn1"
      >查询</el-button
    >
    <el-button type="primary" plain>新增菜品</el-button>
    <el-button type="primary" plain>重置</el-button>
    <el-table style="width: 100%" :data="tableData">
      <el-table-column
        prop="id"
        label="菜品ID"
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="food_name"
        label="菜品名称"
        min-width="100"
      ></el-table-column>
      <el-table-column prop="food_action" label="使用状态" min-width="100">
        <el-switch
          :change="changeSwitch"
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </el-table-column>
      <el-table-column
        prop="food_price"
        label="菜品价格"
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="food_type"
        label="菜品类型"
        min-width="100"
      ></el-table-column>
      <el-table-column label="图片预览" min-width="100">
        <!-- <template slot-scope="scope"> -->
        <img :src="'imgUrl' + '/' + 'food_img'" alt="" />
        <!-- </template> -->
      </el-table-column>
      <el-table-column prop="date" label="操作" min-width="180">
        <template>
          <el-button type="primary">修改</el-button>
          <el-button type="danger">删除菜品</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-size="4"
      layout="prev, pager, next"
      :total="tableData.length"
    >
    </el-pagination>
  </div>
</template>

<script>
import * as api from "../utils/api";
export default {
  data() {
    return {
      restaurants: [],
      state: "",
      timeout: null,
      tableData: [],
      imgUrl: "http://101.37.146.52:3000/",
      value: "",
    };
  },
  computed: {
    // switch() {
    //   return tableData.food_action ? (value = true) : (value = false);
    // },
    dangqianPage() {
      let dangqianNum = (this.tableData - 1) * 5;
      let dangqianPageData = this.tableData.slice(dangqianNum, dangqianNum + 5);
    },
  },
  methods: {
    loadAll() {
      // return [123];
    },
    querySearchAsync(queryString, cb) {},
    createStateFilter(queryString) {},
    handleSelect(item) {},
    changeSwitch() {
      console.log(123);
    },
    elChangePage() {},
    elPage() {},
  },
  created() {
    this.axios({
      url: api.GET_COMM,
      method: "get",
      // params:{

      // }
    }).then((data) => {
      this.tableData = data.data.data;
    });
  },
  // mounted() {},
};
</script>

<style lang='less' scoped>
.search {
  text-align: justify;
}
.el-autocomplete {
  margin-right: 10px;
}
.el-pagination {
  text-align: center;
}
</style>